<template>
	<view class="edit-img">
		<view class="edit-img__btn">
			<button type="default" size="mini" @click="cancel">取消</button>
			<button type="primary" size="mini" @click="confirm">确认</button>
		</view>
		<canvas canvas-id="imgCanvas" class="edit-img__cancas" @touchstart="drawStart" @touchmove="drawMove" @touchend="closeDraw" @touchcancel="closeDraw"></canvas>
		<view class="edit-img__handle">
			<text :class="{'color-red': current==2}" @click="current=2">画圈</text>
			<text :class="{'color-red': current==1}" @click="current=1">涂鸦</text>
			<!-- <text>撤回</text> -->
			<text @click="resetCanvas">清空</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'EditImg',
		props: ['imgSrc', 'imgPath'],
		data() {
			return {
				current: 2, //当前操作
				context: null,	//canvas
				canvasInfo: {},
				canvasImgSrc: '',	
				imgHeight: '',	
				imgWidth: '',
				firstPoint: {},	//第一个点
				line: false,	//move时的第一个点
				lastPoint: {}	//最后一个点
			};
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.edit-img__cancas').boundingClientRect(res => {
				if(res){
					uni.getImageInfo({
						src: this.imgSrc,
						success: (image)=> {
							this.imgWidth = image.width;
							this.imgHeight = image.height;
							this.canvasInfo = this.calculate(res.width, res.height, image.width, image.height);
							this.context = uni.createCanvasContext('imgCanvas');
							this.context.drawImage(this.imgSrc, this.canvasInfo.px, this.canvasInfo.py, this.canvasInfo.pw, this.canvasInfo.ph);
							this.context.draw();
						}
					});
				}
			}).exec()
		},
		methods: {
			calculate(w, h, pw, ph) {	//canvas图片自适应居中
			console.log(w,h,pw,ph)
				let px = 0;
				let py = 0;
				if(pw < w && ph < h){
						px = 0.5 * w - 0.5 * pw;
						py = 0.5 * h - 0.5 * ph;
				}else if (ph / pw > h / w) {
						let uu = ph;
						ph = h
						pw = pw * h / uu
						px = 0.5 * w - 0.5 * pw;
				} else {
						let uu = pw;
						pw = w;
						ph = ph * pw / uu
						py = 0.5 * h - 0.5 * ph;
				}
				return {px, py, pw, ph}
			},
			drawStart(e) {
				e.preventDefault();
				this.context.setStrokeStyle('#ff0000');
				this.context.setLineWidth(5);
				this.firstPoint = e.touches;
				if(this.current == 1){
					this.context.moveTo(e.touches[0].x, e.touches[0].y);
				}else{
					
				}
			},
			drawMove(e) {
				e.preventDefault();
				if(this.current == 1){
					this.context.moveTo(this.firstPoint[0].x, this.firstPoint[0].y);
					if(this.line) this.context.moveTo(this.line[0].x, this.line[0].y);
					this.context.lineTo(e.touches[0].x, e.touches[0].y);
					this.line = e.touches;
					this.context.stroke();
					this.context.draw(true);
				}else{
					this.resetCanvas();
					this.lastPoint = e.touches;
					let a = this.firstPoint[0].x - e.touches[0].x;
					let b = this.firstPoint[0].y - e.touches[0].y;
					let c = Math.sqrt(a * a + b * b);
					this.context.setStrokeStyle('#ff0000');
					this.context.beginPath();
					this.context.arc(e.touches[0].x, e.touches[0].y, c/2, 0, 2 * Math.PI);
					this.context.stroke();
					this.context.draw(true);
				}
			},
			closeDraw(e) {
				if(this.current == 1){
					this.line = false;
				}else{
					
				}
				// uni.canvasToTempFilePath({
				//   x: this.canvasInfo.px,
				//   y: this.canvasInfo.py,
				//   width: this.canvasInfo.pw,
				//   height: this.canvasInfo.ph,
				//   destWidth: this.imgWidth,
				//   destHeight: this.imgHeight,
				//   canvasId: 'imgCanvas',
				// 	fileType: 'jpg',
				// 	quality: 1,
				//   success: (res)=> {
				// 		this.canvasImgSrc = res.tempFilePath;
				//   } 
				// })
			},
			cancel() {
				this.$emit('update:imgSrc', false);
			},
			confirm() {
				uni.showLoading({
					title: '图片上传中…'
				})
				uni.canvasToTempFilePath({
				  x: this.canvasInfo.px,
				  y: this.canvasInfo.py,
				  width: this.canvasInfo.pw,
				  height: this.canvasInfo.ph,
				  destWidth: this.imgWidth,
				  destHeight: this.imgHeight,
				  canvasId: 'imgCanvas',
					fileType: 'jpg',
					quality: 0.8,
				  success: (res)=> {
						this.$emit('update:imgPath', res.tempFilePath);
						this.$emit('update:imgSrc', false);
				  } 
				})
			},
			resetCanvas() {
				this.canvasImgSrc = this.imgSrc;
				this.context.drawImage(this.imgSrc, this.canvasInfo.px, this.canvasInfo.py, this.canvasInfo.pw, this.canvasInfo.ph);
				this.context.draw();
			},
			resetCanvas1() {
				this.context.drawImage(this.canvasImgSrc, this.canvasInfo.px, this.canvasInfo.py, this.canvasInfo.pw, this.canvasInfo.ph);
				this.context.draw();
			}
		}
	}
</script>

<style lang="less">
	.edit-img{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #fff;
		z-index: 999;
		>.edit-img__btn{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 60rpx 50rpx 0;
			uni-button{
				margin: 0;
			}
		}
		.edit-img__cancas{
			width: 100%;
			height: calc(100% - 320rpx);
		}
		>.edit-img__handle{
			position: absolute;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 160rpx;
			color: #fff;
			background: #000000;
		}
	}
</style>
